const {
  getEventData
} = getApp()
Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  properties: {
    title: String,
    value: {
      type: null,
      value: ''
    },
    required: Boolean,
    startPlaceholder: {
      type: String,
      value: '请选择',
    },
    endPlaceholder: {
      type: String,
      value: '请选择',
    },
    disabled: Boolean,
    inset: Boolean
  },
  observers: {
    'value': function(value) {
      if (value) {
        this.setData({
          startValue: value[0],
          endValue: value[1]
        })
      } else {
        this.setData({
          value: []
        })
      }
    }
  },
  data: {
    startValue: '',
    endValue: ''
  },
  methods: {
    onStartChange(event) {
      this.setData({
        startValue: event.detail.value
      })
      this.bindChange();
    },

    onEndChange(event) {
      this.setData({
        endValue: event.detail.value
      })
      this.bindChange();
    },

    onStartClear() {
      this.setData({
        startValue: ''
      })
      this.bindChange()
    },

    onEndClear() {
      this.setData({
        endValue: ''
      })
      this.bindChange()
    },

    bindChange() {
      const { startValue, endValue } = this.data
      this.triggerEvent('change', [startValue, endValue]);
    }
  }
})